<style lang="less">
    @import './index.less';
</style>

<template>
    <div>
        <Row :gutter="10">
            <i-col span="6">
            <div class="page-content">
                <Row style="height: 24px;line-height: 24px;margin-bottom: 10px;">
                    <i-col>
                    <Input v-model="searchKey" placeholder="关键字" style="width: 100px;" size="small"></Input>
                    <Button type="primary" size="small">
                        <Icon type="search"/>
                        查询
                    </Button>
                    </i-col>
                </Row>
                <Table border
                       highlight-row
                       :context="self"
                       :loading="tableLoading"
                       :columns="tableColumn"
                       :data="tableData"
                       @on-selection-change="tableSelectionChange"
                       @on-current-change="tableRowChange">

                </Table>
            </div>
            </i-col>

            <i-col span="18">
            <Card>
                <p slot="title">
                    资源服务:{{resourceInfo.name}}
                    <small>{{resourceInfo.desc}}</small>
                    <Button type="primary" size="small" class="pull-right" @click="saveResource">
                        刷新资源
                    </Button>
                </p>
                <div>
                    <Row :gutter="10">
                        <i-col v-for="func in resourceInfo.func" :key="func.method+func.path" span="6">

                        <Card style="margin-bottom: 10px">
                            <p slot="title">
                                {{func.path}}
                            </p>
                            <div>
                                <p>方法 : {{func.method}}</p>
                                <p>描述 : {{func.desc}}</p>
                            </div>
                        </Card>
                        </i-col>
                    </Row>
                </div>
            </Card>
            </i-col>
        </Row>
    </div>
</template>

<script>
  import colomn from './column';
  export default {
    data () {
      return {
        self: this,
        searchKey: '',
        tableLoading: false,
        tableData: [],
        tableColumn: colomn,
        resourceInfo: {name: '', desc: '', func: {}},
      };
    },
    methods: {
      loadData () {
        let self = this;
        this.$http.get('/sys/resources')
          .then(
            (res) => {
              res.data[0]._highlight = true;
              self.tableData = res.data;
              self.tableRowChange(res.data[0], null);
            })
          .catch(
            (err) => {
              this.$Message.error(err.message);
            });
      },
      tableSelectionChange (selection) {
        this.appSelection = selection;
      },
      tableRowChange (row, oldRow) {
        let self = this;
        this.$http.get('/' + row.resourceName + '/resourceInfo')
          .then((res) => {
            self.resourceInfo = res.data;
            self.resourceInfo.resourceId = row.resourceId;
          })
          .catch(() => {
            self.$Message.error('获取资源基本信息失败');
          });
      },
      saveResource () {
        this.$Message.loading({content: '刷新资源[' + this.resourceInfo.desc + ']信息', duration: 0, top: 200});
        this.$http.post('/sys/resources/endpoint', this.resourceInfo)
          .then(
            (res) => {
              this.$Message.destroy();
            })
          .catch(
            (err) => {
              this.$Message.destroy();
              this.$Message.error(err.message);
            });
      }
    },
    components: {},
    computed: {},
    watch: {},
    mounted () {
      this.loadData();
    }
  };
</script>
